<template>
  <Modal width="68" :value="show" title="测试报告"  @on-cancel='rightClose'>
    <Form ref="formInline" :model="formInline" inline :label-width="80">
      <FormItem label="用例名称">
        <Input type="text" v-model="formInline.case_name" placeholder=""/>
      </FormItem>
      <FormItem label="所属环境">
        <Input type="text" v-model="formInline.env_name"/>
      </FormItem>
      <FormItem label="所属接口">
        <Input type="text" v-model="formInline.interface_id"/>
      </FormItem>
      <FormItem label="所属场景">
        <Input type="text" v-model="formInline.suite_name"/>
      </FormItem>
      <FormItem label="请求URL" style="width: 72%">
        <Input type="text" v-model="formInline.url"/>
      </FormItem>
      <FormItem label="请求方法" style="margin-left: 6px">
        <Input type="text" v-model="formInline.method"/>
      </FormItem>
      <FormItem label="执行人员">
        <Input type="text" v-model="formInline.create_user"/>
      </FormItem>
      <FormItem label="执行时间">
        <Input type="text" v-model="formInline.created_time"/>
      </FormItem>
      <FormItem label="执行结果">
        <Input type="text" v-model="formInline.result_type === 1 ? '成功' : '失败'"/>
      </FormItem>
    </Form>
    <Tabs value="name1">
      <TabPane label="响应结果" name="name1">
        <div style="display: flex">
          <div style="float: left;width: 50%">
            <h2>响应结果</h2>
            <vue-json-editor v-model="response_body" :mode="'code'" lang="zh"/>
          </div>
          <div style="width: 40%; margin-left: 20px">
            <h2>响应header</h2>
            <vue-json-editor v-model="response_headers" :mode="'code'" lang="zh"/>
          </div>
        </div>
      </TabPane>
      <TabPane label="请求信息" name="name2">
        <div style="display: flex">
          <div style="float: left;width: 50%">
            <h2>请求参数</h2>
            <vue-json-editor v-model="request_body" :mode="'code'" lang="zh"/>
          </div>
          <div style="width: 40%; margin-left: 20px">
            <h2>请求header</h2>
            <vue-json-editor v-model="request_headers" :mode="'code'" lang="zh"/>
          </div>
        </div>
      </TabPane>
      <TabPane label="校验结果" name="name3">
        <h2>参数提取</h2>
        <Table :columns="columns1" :data="response_extracts"></Table>
        <h2>断言</h2>
        <Table :columns="columns2" :data="response_asserts"></Table>
      </TabPane>
      <TabPane label="执行日志" name="name4">
        <div v-for="(item,index) in caseLogs" :key="index" style="font-size: 16px">
          <span style="width: 50px">{{ item.level }}</span>
          <span v-if="item.level === 'error'" style="color: red;margin-left: 18px">{{ item.msg }}</span>
          <span v-else style="color: green;margin-left: 18px">{{ item.msg }}</span>
        </div>
      </TabPane>
    </Tabs>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
import {caseLog, caseResultApi} from "@/utils/api";
import vueJsonEditor from "vue-json-editor";

const columns1 = [
  {
    title: '提取表达式',
    key: 'extract_express'
  },
  {
    title: '变量名称',
    key: 'var_name'
  },
  {
    title: '变量值',
    key: 'var_value'
  },
  {
    title: '变量类型',
    key: 'var_type'
  }
]
const columns2 = [
  {
    title: '断言类型',
    key: 'assert_type',
  },
  {
    title: '表达式',
    key: 'check',
  },
  {
    title: '期望结果',
    key: 'expect',
  },
  {
    title: '期望关系',
    key: 'comparator',
  },
  {
    title: '实际值类型',
    key: 'real_type',
  },
  {
    title: '实际值',
    key: 'real_value',
  },
  {
    title: '断言结果',
    key: 'result',
  },
]

export default {
  name: "caseResult",
  props: {
    show: Boolean,
    resultId: Number
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          this.getCaseResult(this.resultId)
          this.getCaseLog(this.resultId)
        }
      }
    }
  },
  components: {
    vueJsonEditor
  },
  data() {
    return {
      columns1,
      columns2,
      formInline: {
        case_name: '',
        env_name: "",
        interface_id: "",
        suite_name: "",
        url: "",
        method: "",
        create_user: "",
        created_time: "",
        result_type: ""
      },
      response_body: "",
      response_headers: "",
      request_body: "",
      request_headers: "",
      response_extracts: [],
      response_asserts: [],
      caseLogs: []
    }
  },
  methods: {
    rightClose(){
      this.$emit("closeResult", false)
    },
    cancel() {
      this.$emit("closeResult", false)
    },
    getCaseResult(id) {
      caseResultApi({id: id}).then(res => {
        console.log(res.data.data)
        this.formInline = res.data.data;
        this.response_body = JSON.parse(res.data.data.response_body);
        this.response_headers = JSON.parse(res.data.data.response_headers);
        this.request_body = res.data.data.request_body;
        this.request_headers = JSON.parse(res.data.data.request_headers);
        this.response_extracts = JSON.parse(res.data.data.response_extracts)
        this.response_asserts = JSON.parse(res.data.data.response_asserts)
      })
    },
    getCaseLog(id) {
      caseLog({id: id}).then(res => {
        console.log(res.data.data)
        this.caseLogs = res.data.data
      })
    }
  }
}
</script>

<style scoped>

</style>
